﻿@page "/chart/vertical-chart"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using System.Collections.ObjectModel
@using System.Timers

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates the seismograph analysis using the vertical chart by changing the orientation of the x-axis to the vertical and the y-axis to the horizontal.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the vertical type chart. To render a chart in vertical manner, you can use <code>IsTransposed</code> property in the chart.</p>
    <p>More information about the marker can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/vertical-chart'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section" align="center">
    <SfChart IsTransposed="true" Title="Indonesia - Seismograph Analysis" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Time (s)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Velocity (m/s)">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChangePoints" XName="Velocity" YName="Time" Type="ChartSeriesType.Line">
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="false"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Random randomNum = new Random();
    private int count = 1;
    private static Timer timer;
    private Theme Theme { get; set; }
    public ObservableCollection<Data> ChangePoints { get; set; }

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
        ChangePoints = this.GetData(0, 50);
        timer = new Timer(500);
        timer.Elapsed += AddNewChartData;
        timer.AutoReset = true;
        timer.Enabled = true;
    }

    private ObservableCollection<Data> GetData(int start, int count)
    {
        ObservableCollection<Data> chartPoints = new ObservableCollection<Data>();

        for (double i = start; i < start + count; i++)
        {
            chartPoints.Add(new Data
            {
                Velocity = i,
                Time = randomNum.Next(100, 250)
            });
            this.count++;
        }
        return chartPoints;
    }

    private void AddNewChartData(Object source, System.Timers.ElapsedEventArgs e)
    {
        ChangePoints.Add(new Data
        {
            Velocity = count + 10,
            Time = randomNum.Next(100, 250)
        });
        this.count += 10;
        InvokeAsync(this.StateHasChanged);
    }

    public class Data
    {
        public double Velocity { get; set; }
        public double Time { get; set; }
    }

}
